<template>
	<view class="dingwei">
		<view class="tupai">
			<image src="../../static/image/sysem/yqhbt.png" mode=""></image>
		</view>
		<view class="ershiw">
			<!-- <image src="../../static/image/sysem/ftc.png" mode=""></image> -->
			<uqrcode ref="uqrcode" canvas-id="qrcode" @click="ewmfn" v-bind:value="qrcodeurl"
				:options="{ margin: 10}" size="150">
			</uqrcode>
		</view>
		<view class="hongsetext textcenter">推广码：{{userInfo.invite_code}}</view>
		<view class="gudingdb mainpadding2">
			<view class="bigbtn" @click="saveimg">保存二维码</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				qrcodeurl:"",
				userInfo:{}
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			// 二维码点击预览图片
			ewmfn() {
				this.$refs.uqrcode.toTempFilePath({
					success: res => {
						console.log(res);
						var i = [res.tempFilePath]; //获取当前页面的轮播图数据
						//uniapp预览轮播图
						uni.previewImage({
							current: 0, //预览图片的下标
							urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
						})
					}
				});
			},
			saveimg(){
				this.$refs.uqrcode.save({
				  success: () => {
				    httpRequest.toast("保存成功")
				  }
				});
			},
			init() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
					this.system()
				})
			},
			system() {
				httpRequest.request('/api/index/getConfigInfo', 'GET', {}).then(res => {
					this.qrcodeurl = res.data.share_url+"?invite_code="+this.userInfo.invite_code
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hongsetext {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #F2432E;
		position: absolute;
		bottom: 242rpx;
		left: 50%;
		transform: translate(-50%,0);
	}
	.bigbtn{
		background-color: #ffecb7;
		color: #F2432E;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}

	.ershiw {
		position: absolute;
		bottom: 315rpx;
		left: 50%;
		transform: translate(-50%,0);
		width: 304rpx;
		height: 304rpx;
		border-radius: 20rpx;

		image {
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
		}
	}

	.tupai {
		width: 100vw;
		height: 100vh;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>